<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body bgcolor="#EEEEEE" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">

	<div id="insertImage_main" xlvobject="xlv.obj.pane" xlvprop="{bkOpacity:false,glow:{enable:true},border:{enable:true}}" style="background:#EEEEEE;">
		<style type="text/css">
			#insertImage_main,
			#insertImage_main *{
				font-family: arial, verdana, helvetica;
				font-size: 11px;
			}
			#insertImage_main #img_table #face{
				padding:2px;
				border:solid 1px transparent;
			}
			#insertImage_main #img_table #face:hover{
				padding:0px 2px 4px 2px;
				border:solid 1px blue;
			}
		</style>
		<div xlvobject="xlv.obj.webObject" xlvprop="{name:'fs.editor.images',objectURL:'fs.editor.images'}"></div>
		<div xlvobject="xlv.obj.tabPane" style="padding: 8px">
			<div xlvobject="xlv.obj.tab">
				<div id="xlvid_tab_content">face</div>
				<div id="xlvid_tab_content">upload</div>
			</div>
			<div xlvobject="xlv.obj.layerPanes">
				<div xlvobject="xlv.obj.pane"
					xlvmethod="{
						initial:function(){
							var table=xlv.util.findChild(this,{id:'img_table'});
							var index=101;
							for(var i=0;i &lt; 4;++i){
								var row=table.insertRow(-1);
								for(var j=0;j &lt; 10; ++j){
									var cell=row.insertCell(-1);
									var img=document.createElement('img')
									cell.appendChild(img);
									img.src='/xlive/images/faces/'+index+'.png';
									img.id='face';
									++index;
								}
							}
							this.addEventHandler('mousedown', 'selectface');
							this.$self('initial');
						},
						selectface:function(event){
							var img=this.targetElement(event.target,{tag:'img'});
							if(img){
								var main=xlv.util.findParent(this,{id:'insertImage_main'});
								main.$P.caller.src=img.src;
								main.$P.caller.commit=true;
								main.dispose();
							}
						}
					}"
				>
					<table id="img_table">
					</table>
				</div>
				<div xlvobject="xlv.obj.pane">
						<div id="uploader" 
							 xlvobject="xlv.obj.uploader" style="padding:12px"
				    	 	 xlvprop="{
				    	 		showSubmit:true,
				    	 		limit:1,
				     			dmName:'fs.editor.images',methodName:'properties.upload',
				     			srcImg:'/xlive/images/_upload.png'
				     			}"
				     		 xlvmethod="{
				     		 	process:function(){
				     		 		this.getDataModel('fs.editor.images').setValue(new Date().getTime()+'_','properties.upload.prefix-file-name');
				     		 		this.$self('process');
				     		 	},
				     		 	uploadResposed:function(valid,why){
				     		 		if(!valid){
				     		 			alert('upload failure :'+why);
				     		 			return;
				     		 		}
				     		 		var dm=this.getDataModel('fs.editor.images');
				     		 		var files=dm.xml_selectNodes('properties/upload/return/data/file');
				     		 		var fn=xlv.util.getElementValue(files[0]);
				     		 		var main=xlv.util.findParent(this,{id:'insertImage_main'});
									main.$P.caller.src='/xlive/images/upload/'+dm.getValue('properties.upload.prefix-file-name')+fn;
									main.$P.caller.commit=true;
									main.dispose();
								}
				     		 }"		
						 >
						</div>
						<div>
							<span style="font-size:8px;color:gray">
								press add upload files, select a file from your file system, then press upload process.
							</span>
						</div>
				</div>
			</div>
		</div>
	
	</div>
</body>
</html>
